<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>heisei</title>
		<style>
			*{
				padding:0;margin:0;list-style: none;text-decoration: none;
				color:white
			}
			a {color:white}
			
			html,body{width:100%;height: 100%;}
			
			.content {
				
				text-align: center;
				margin:0 auto 20px;
			}
			.henshin {
				font-size: 16px;color:orange;background-color: white;
				width:140px;
				height:46px;line-height: 46px;
				border-radius: 8px;
				border:none;
				box-sizing: border-box;
				position:relative;
				transform: translate(-50%,-50%);
				left:50%;
				margin: 30px auto;
				outline: none;
				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
				transition:0.3s;
			}
			.henshin:hover{
				height:60px;line-height: 60px;
				width:180px;
			}
			.main{
				width:100%;height:800px;
				background-image: linear-gradient(#e66465, #9198e5);
				padding-top: 100px;
				/* filter: blur(30px); */
			}
			
			.article {
				margin:0 100px 0;
				text-align: left;
				margin-top:30px;
				text-indent:2em;
			}
			.title {
				height:auto;
				
			}
			.title:hover {
				transition:all 2s;
				transform:translate(0,10px)
			}
			
			@media screen and (min-width:770px) {
				.header {
					background: url(../image/cool-ba522d.png) no-repeat;
					background-size: 100% 100%;
					width:100%;height:100%;
					
					box-sizing: border-box;
					padding-top: 180px;
				}
				.nav {
					width:100%;height:40px;padding:8px;
				}
				.nav ul .ii {display:none;}
				.nav ul {
					margin:0 auto 80px;
					width:770px;
					position:relative;z-index: 33;color:white;
					display:flex;justify-content: center;
					
				}
				.nav ul li {
					flex:1;height:30px;line-height: 30px;
					width:60px;box-sizing: border-box;
					margin:0 10px 10px 0;
					text-align: center;
				}
				.nav ul li:hover {
					background-color: white;
					border-radius: 12px;
				}
				.nav ul li a:hover {
					color:orange
				}
				.current {
					border: 1px solid white;
					border-radius: 12px;
				}
				
			}
			
			
			@media screen and (max-width:770px) {
				.header {
					background: url(../image/cool-ba522d.png) no-repeat;
					background-position:top left;
					background-size: 140% 140%;
					/* background-size: 100% 100%; */
					width:100%;height:100%;
					padding-top:180px;
					box-sizing: border-box;
				}
				/* .nav ul {display:flex;} */
				.ii {width:30px;height:30px;display: inline;position:relative;top:5px;
				
				}
				.nav {
					width:100%;background-color: black;height:40px;margin-bottom: 80px;
					line-height: 40px;
				}
				.nav ul li {display:none;}
				.nav ul .current {
					display:inline;height:40px;margin:0 auto;width:100px;
				}
				.nav_active {
					position:relative;z-index: 99;
					width:100%;background-color: black;height:240px;
					line-height: 40px;
					overflow: hidden;
				}
				
				.title p {
					font-size: 14px;
					margin:10px 40px 0;
				}
				#art2 {
					display: none;
				}
				
			}
			/* 
			此时的效果为点击标签会跳转也页面;
			在不使用框架,又不让地址发生跳转;并且页面部分内容发生改变,利用选项卡的操作 
			*/
		</style>
	</head>
	<body>
		<div class="header">
			<nav class="nav" style="transition:1s;position: fixed;top:0;">
			    <ul class="list"> 
					<img src="../image/nav.png" alt="dao" class="ii">
			        <li><a href="../index.html">Portfolio</a></li>
			        <li class="current"><a href="javascript:;">Heisei</a></li>
			        <li><a href="javascript:;">about</a></li>
			        <li><a href="javascript:;">Print Media</a></li>
			        <li><a href="javascript:;">Graphic Design</a></li>
			    </ul>
			</nav>
			<!-- 
			<div class="content">
			
				<h2 style="margin-bottom: 20px;">Do Your Best</h2>
				<h5>通りすがりの仮面ライダーだ! 覚えておけ!</h5>
				</div>
				<button class="henshin">Start Your Engine</button> 
			-->
			
			<div class="title">
				<div class="pic"></div>
				<p class="article">
					My father was a self-taught mandolin player.When he was younger,he was a member of a small country music band I joined the United States Air Force in January of 1962. He seemed to shine when he was playing. You could see his pride in his ability to play so well for his family. 　　
				</p>
				<p class="article">
					In August of 1993 my father was diagnosed with inoperable lung cancer. He chose not to receive chemotherapy treatments so that he could live out the rest of his life in dignity. As sick as he was, he was still pleasing others. Dad sure could play that Mandolin!
				</p>
				<p class="article" id="art2">
					An ancient stand of the world’s tallest trees has fallen victim to California’s raging wildfires. The CZU and SCU complex fires near Santa Cruz have ravaged Big Basin State Park. Big Basin is California’s oldest state park and home to the largest continuous stand of ancient coast redwoods south of San Francisco.
				</p>
			</div>
		</div>
		<script type="text/javascript" src="../src/jquery.min.js"></script>
		<script type="text/javascript" src="../src/jshaker.js"></script>
	<script type="text/javascript">
		let ii =document.getElementsByClassName('ii');
		// let xx =document.getElementsByClassName('list');
		let list =document.getElementsByTagName("li");
		let nav =document.getElementsByTagName('nav');
		let flag =false;
		
		ii[0].addEventListener('click',function(){
			if(flag) {
				for(let i=0;i<list.length;i++){
					if(list[i].className =="current") {
						list[i].style.display ="inline"
						continue;
					}
					list[i].style.display="none";
				}
				nav[0].className="nav";
				
				flag=false;
				return;
			}
			nav[0].className="nav_active";
			setTimeout(function(){
				for(let i=0;i<list.length;i++){
					// list[i].className="";
					list[i].style.display="block";
				}
			},100)
			flag =true;
		})
		var key= true;
		$(document).ready(function(){
		   $('.title').click(function(){
				 if(key) {
					 $(this).jshaker();
					 key = false;
					 return;
				 }
		       $(".title").jshaker.stop()  
					key = true;
			});
		});
	</script>
	</body>
</html>

